<template>
  <div>
    <!-- 基础用法 -->
    <div v-loading="isLoading" class="loading-container">
      <p>这里是需要加载的内容</p>
      <p>加载时会显示 loading 状态</p>
    </div>

    <!-- 自定义文本和背景 -->
    <div 
      v-loading="isLoading2" 
      loading-text="正在加载中..." 
      loading-background="rgba(0, 0, 0, 0.5)"
      class="loading-container dark-bg"
    >
      <p>深色背景的加载示例</p>
    </div>

    <!-- 表格加载示例 -->
    <a-table 
      v-loading="tableLoading"
      :columns="columns" 
      :data-source="data"
      loading-text="数据加载中..."
      class="table-container"
    />

    <div class="controls">
      <a-button @click="toggleLoading" type="primary">
        {{ isLoading ? '隐藏' : '显示' }} Loading
      </a-button>
      
      <a-button @click="toggleLoading2" style="margin-left: 10px">
        {{ isLoading2 ? '隐藏' : '显示' }} 深色 Loading
      </a-button>

      <a-button @click="toggleTableLoading" style="margin-left: 10px">
        {{ tableLoading ? '隐藏' : '显示' }} 表格 Loading
      </a-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      isLoading2: false,
      tableLoading: false,
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
        },
      ],
      data: [
        {
          key: '1',
          name: '张三',
          age: 32,
        },
        {
          key: '2',
          name: '李四',
          age: 28,
        },
      ]
    }
  },
  methods: {
    toggleLoading() {
      this.isLoading = !this.isLoading
    },
    toggleLoading2() {
      this.isLoading2 = !this.isLoading2
    },
    toggleTableLoading() {
      this.tableLoading = !this.tableLoading
    }
  }
}
</script>

<style scoped>
.loading-container {
  height: 200px;
  padding: 20px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  margin-bottom: 20px;
}

.dark-bg {
  background: #f0f2f5;
}

.table-container {
  margin-bottom: 20px;
}

.controls {
  margin-top: 20px;
}
</style>